<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">

        <!--绑定class样式--字符串写法。
            适用于样式的内容不确定，需要动态指定-->
        <!--绑定的样式正常写，变化的样式单独写-->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

        <!--绑定class样式--数组写法。
            适用于要绑定的样式名字不确定，个数不确定-->
        <!--个数不确定的写成数组形式-->
        <div class="basic" :class="classarr">{{name}}</div>

        <!--绑定class样式--对象写法。
            适用于要绑定的样式名字确定，个数确定,但是要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

        <!--绑定style样式--对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!--绑定style样式--数组写法-->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
    </div>
</body>

<script>
    const vm=new Vue({
        el:'#root',
        data:{
          name:'Gui',
          mood:'normal',
          classarr:['atguigu1','atguigu2','atguigu3'],
          classObj:{
            atguigu1:false,
            atguigu2:false
          },
          styleObj:{
            fontSize:'40px',
            color:'red'
          },
          styleObj2:{
            backgroundColor:'orange'
          }
        },
        methods:{
            changeMood(){
               //this.mood='happy'
               const arr=['happy','sad','normal']
               this.mood=arr[Math.floor(Math.random()*3)]
            }
        }
    })
</script>

</html>